<template>
    <el-tabs type="border-card" closable :model-value="modelValue" @tab-change="emitModelValue">
        <el-tab-pane v-for="(item, index) in tabList" :key="item[nameValue]" :label="item[lableValue]" :name="item[nameValue]" closable>
            <template #label="scope">
                <span style="display:inline-block;height:100%"
                    v-contextMenu="getContextMenuObj(tabList, index, setActiveTab)">{{ item[lableValue] }}</span>
            </template>
            <slot :item="item"></slot>
        </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import { getContextMenuObj, getActiveTab } from './helper/contetxMenuFun.js'
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    tabList: {
        type: Array,
        default: [],
    },
    nameValue: {
        type: String,
    },
    lableValue: {
        type: String,
        default: "label"
    },
    modelValue: {
        type: String,
    }
})
const emitModelValue = (value) => {
    emit('update:modelValue', value)
}
// 删除tab 后更新activeTab
const setActiveTab = (clickIndex, menuItem) => {
    const activeTab = getActiveTab(props.tabList, proxy.modelValue, props.nameValue, clickIndex, menuItem)
    emitModelValue(activeTab)
}
</script>